<script setup lang="ts">
import { message, Flex, Button, Space, theme } from 'ant-design-vue'
import { CloudUploadOutlined, LinkOutlined, FireOutlined, ReadOutlined, HeartOutlined, SmileOutlined, CommentOutlined } from '@ant-design/icons-vue'
import { Attachments, Sender, Bubble, Prompts, Welcome, XStream } from 'ant-design-x-vue'
import type { BubbleListProps, PromptsProps } from 'ant-design-x-vue'
import MarkdownIt from 'markdown-it'
import { v4 as uuid } from 'uuid'
const md = MarkdownIt({ html: true, breaks: true })
// ======================================= 消息列表 =======================================

// ======================================= 文件上传 =======================================
const fileList = ref([])
const openSenderHeader = ref(false)
function changeSenderHeader() {
  openSenderHeader.value = !openSenderHeader.value
}
// ======================================= 输入框 =======================================
const content = ref('')
const sendLoading = ref(false)
const requestParams = {
  session_id: uuid(),
  visitor_biz_id: uuid(),
  incremental: true,
  bot_app_key: 'yakWpwJNxbVzFDKsDZYLxtOiNwKdkRBkEalKNqECNPHFpTGdTkpilyMEcJzLqcBSCKqTayEHtNspomfGIlxEDqWjaEBLhLXzclxxQPdnJEayqoKFnLvgBIFsnWMgQTrK'
}
let controller: AbortController
const renderedContent = ref([])
async function getChatResolve() {
  controller = new AbortController()
  const url = 'https://wss.lke.cloud.tencent.com/v1/qbot/chat/sse'
  // const url = 'http://localhost:3001/company/sse/connect'
  const option: RequestInit = {
    method: 'POST',
    signal: controller.signal,
    body: JSON.stringify({
      content: content.value,
      request_id: uuid(),
      ...requestParams
    })
  }
  try {
    const res = await fetch(url, option)
    for await (const chunk of XStream({
      readableStream: res.body as ReadableStream
    })) {
      const { data, event } = chunk
      if (event === 'reply') {
        const { payload } = JSON.parse(data)
      }
      // if (chunk.data && chunk.event === 'reply') {
      //   const data = JSON.parse(chunk.data)
      //   const info = {
      //     role: data.payload.is_from_self ? 'local' : 'ai',
      //     avatar: data.payload.from_avatar,
      //     name: data.payload.from_name,
      //     content: data.payload.content
      //   }
      //   renderedContent.value.push(info)
      // }
    }
  } catch (error) {
    console.log(error)
  } finally {
    sendLoading.value = false
    console.log(renderedContent.value)
  }
}
async function onSubmit() {
  sendLoading.value = true
  try {
    await getChatResolve()
  } catch (error) {
    console.log(error)
  } finally {
    // sendLoading.value = false
  }
}
function onCancel() {
  controller.abort()
  sendLoading.value = false
}
</script>
<template>
  <div class="chat-layout">
    <!-- 消息列表 -->
    <!-- 输入框 -->
    <Sender v-model:value="content" :loading="sendLoading" :autoSize="{ minRows: 1, maxRows: 8 }" @submit="onSubmit" @cancel="onCancel">
      <!-- <template #header>
        <Sender.Header title="上传文件" :open="openSenderHeader" @open-change="changeSenderHeader">
          <Attachments :items="fileList">
            <template #placeholder>
              <div class="chat-sender-header-placeholder">
                <CloudUploadOutlined style="font-size: 4em" />
                <span>点击或拖动文件至此</span>
              </div>
            </template>
          </Attachments>
        </Sender.Header>
      </template> -->

      <!-- <template #prefix>
        <Button type="text" @click="changeSenderHeader">
          <template #icon>
            <LinkOutlined />
          </template>
        </Button>
      </template> -->
    </Sender>
  </div>
</template>
<style scoped lang="less">
.chat-layout {
  display: flex;
  flex-direction: column;
  width: '100%';
  max-width: 700px;
  height: 100%;
  margin: 0 auto;
}
.chat-list {
  flex: auto;
}
.chat-sender-header-placeholder {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
}
</style>
